<template>
    <div class="stu-ques-list">
      <Header title="问卷预览" :pathData="pathData" />
      <div 
        v-if="!detailObj?.topics?.length" 
        class="flex-center" 
        style="margin-top: 10px;"
      >暂无数据</div>
      <div class="ques-item-wrap" v-for="(item, i) in detailObj.topics" :key="i">
        <QueItem :row="item" :index="i" :disabled="disabled"  />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { queFormDetail, queStudentDetail } from '@/api/ques.js'
  import Header from '@/views/page/components/header/index.vue'
  import QueItem from '@/views/page/components/queItem/index.vue'
  import { TOPICTYPE } from '@/utils/consts.js'
  const router = useRouter()
  const { currentRoute } = router
  const route = currentRoute.value
  const { id, qfId, stuId, type, privilege } = route.query
  console.log('route.query', route.query)
  const disabled = true
  const detailObj = ref({})

  let pathData = []

  if (type === 'student') {
    pathData = [
      {
        name: '问卷列表',
        path: '/homes/courseteacherhome/exam/questionnaire'
      },
      {
        name:  '问卷学生列表',
        path: '/homes/courseteacherhome/exam/studentList',
        query: {
          id,
          privilege
        }
      },
      {
        name:  '问卷预览',
        path: ''
      }
    ]
  } else {
    pathData = [
      {
        name: '问卷列表',
        path: '/homes/courseteacherhome/exam/questionnaire'
      },
      {
        name:  '问卷预览',
        path: ''
      }
    ]
  }

  onMounted(() => {
    getMyQueFormDetail()
  })

  const getMyQueFormDetail = () => {
    const api = type === 'student' ? queStudentDetail : queFormDetail
    const params = type === 'student' ? { qfId, stuId } : id
    api(params).then(res => {
      if (res.code === '200') {
        detailObj.value = res.data
        const answerMap = res.data.answerMap
        console.log('answerMap', answerMap)
        detailObj.value?.topics?.forEach((item) => {
            let value = null
            if (answerMap) value = answerMap[item.id]
            // 填空题逻辑额外处理
            if (TOPICTYPE[item.typeId] === '填空题') {
                const contentItems = item.content.split(/___/)
                let newContent = ''
                item.selectId = []
                contentItems.forEach((content, idx) => {
                  newContent+=content
                  if (idx < contentItems.length-1) {
                    item.selectId.push(item.id+idx)
                    newContent += `<input id="${item.id+idx}" ${disabled ? 'disabled' : ''} value="${value ? value[idx] ?? '' : ''}" />`
                  }
                })
                item.content = newContent
                console.log('item.lib', item)
            } else if (answerMap) {
              if (TOPICTYPE[item.typeId] === '多选题') {
                // 其他输入项
                const isOther = value?.map((valueItem) => {
                  if (valueItem.indexOf('other:') !== -1) {
                    return valueItem
                  }
                })[0] ?? ''
                if (value && isOther) {
                  item.other = isOther.split(':')[1]
                } else {
                  item.selectId = value && value.length ? value : []
                }
              }else {
                item.selectId = value ? value[0] : ''
              }
            }
        })
      }
    })
  }
  </script>
  
  <style scoped>
  .stu-ques-list {
    background: #fff;
    padding: 0 10px 10px 10px;
    font-size: 13px;
    height: 100%;
    box-sizing: border-box;
  }
  .ques-item-wrap {
    margin-top: 10px;
  }
  </style>